<template>
  <div class="index1">
    <div class="one">
      <router-link :to="{name: 'grade-base', query: {compoent: 'robot-grade1'}}">
        <img src="~@/assets/robot/1/yis.png">
      </router-link>
    </div>
    <div class="two">
      <router-link :to="{name: 'grade-base', query: {compoent: 'robot-grade2'}}">
        <img src="~@/assets/robot/1/ers.png">
      </router-link>
    </div>
    <div class="three">
      <router-link :to="{name: 'grade-base', query: {compoent: 'robot-grade3'}}">
        <img src="~@/assets/robot/1/sans.png">
      </router-link>
    </div>
    <div class="four">
      <router-link :to="{name: 'grade-base', query: {compoent: 'robot-grade4'}}">
        <img src="~@/assets/robot/1/yix.png">
      </router-link>
    </div>
    <div class="five">
      <router-link :to="{name: 'grade-base', query: {compoent: 'robot-grade5'}}">
        <img src="~@/assets/robot/1/erx.png">
      </router-link>
    </div>
    <div class="six">
      <router-link :to="{name: 'grade-base', query: {compoent: 'robot-grade6'}}">
        <img src="~@/assets/robot/1/sanx.png">
      </router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index1',
    data () {
      return {
      }
    }
  }
</script>

<style scoped>
.index1 > div {
  position: absolute; 
}
.one {
  top: 170px;
  left: 340px;
}
.two {
  top: 170px;
  left: 580px;
}
.three {
  top: 170px;
  left: 820px;
}
.four {
  top: 390px;
  left: 340px;
}
.five {
  top: 390px;
  left: 580px;
}
.six {
  top: 390px;
  left: 820px;
}
</style>
